<div class="card bg-light mb-4">
  <div class="card-body">
    <div class="text-muted">
      You can search for students (by section name, team name, student name, or email) from all your courses here.
    </div>
    <div class="text-muted">
      Search Tips:<br>
      <ul>
        <li>Put more keywords to search for more precise results.</li>
        <li>Put quotation marks around words <b>"[any word]"</b> to search for an exact phrase in an exact order. e.g. "John Doe".</li>
      </ul>
    </div>
    <div class="form-group">
      <div class="input-group">
        <input type="text" id="search-keyword" class="form-control" [ngModel]="searchParams.searchKey"
          (ngModelChange)="onSearchKeyChange($event)" [maxlength]="characterLimit" (keyup.enter)="search()" placeholder="Your search keyword">
        <button class="btn btn-primary input-group-text" id="btn-search" (click)="search()"
                [disabled]="searchParams.searchKey === ''"
        >Search</button>
      </div>
      <span>{{ characterLimit - searchParams.searchKey.length }} characters left</span>
    </div>
  </div>
</div>
